<template>
    <div style="padding:35px;position: relative;">
        <img style="margin-left: 18px;border-radius: 50%;width: 50px;height: 50px;margin-top: 20px"
             :src="invitationId.url">
        <span class="s1">{{invitationId.nick}}</span><span class="s2" >{{invitationId.gmtCreate}}</span>
        <p style="text-indent:2em;line-height: 50px;font-size: 15px;">
            {{invitationId.content}}
        </p>
        <div style="margin: 5px;padding-bottom: 5px;border-bottom: 1px solid #9e9e9e ">
            <el-button icon="el-icon-check" size="mini" @click="handleaddlike()">点赞{{invitationId.like}}</el-button>
        </div>
        <div style="width: 700px;margin: auto;border-bottom: 1px solid #9e9e9e;padding: 25px 0">
            <span style="line-height: 25px;color: #9e9e9e;font-size: 25px">共{{commentCount}}条回复</span>
        </div>
        <div style="border-top: 1px solid #9e9e9e">
            <div v-for="(comment,index) in commentList" :key="index"
                 style="position: relative;border-bottom: 1px solid #9e9e9e">
                <img style=";margin-left: 18px;border-radius: 50%;width: 50px;height: 50px;margin-top: 20px"
                     :src="'http://localhost:9080/'+ comment.avatar"/>
                <span style="top: 25px;left: 100px;position: absolute;">{{comment.nick}}
                <el-button @click="handleDeleteCommentList(comment.id)" type="danger" icon="el-icon-delete" circle size="mini " v-if="comment.userId==userId"></el-button></span>
                <span style="top: 25px;right: 50px;position: absolute;">{{comment.gmtCreate}}</span>
                <p style="text-indent:2em;line-height: 50px;font-size: 15px;margin-left:25px">
                    {{comment.content}}
                    <a href="javascript:void (0)" @click="handledivlook(index)" class="el-icon-s-comment"
                       style="float: right;color: #9e9e9e;margin-right: 50px;margin-top: 25px">回复</a>
                </p>
                <div style="border-radius: 10%;display: block;text-align: center;" v-if="displayShow2 == index">
                    <input style="width: 580px;height: 35px;background-color: #f0f0f0;padding: 5px 10px;border-radius: 5px;border: 1px solid #9e9e9e"
                           type="text" v-model="replyContent"><br>
                    <el-button
                            @click="divlookf()"
                            style=";width: 80px;margin-left: 430px;margin-top: 25px;height: 35px;font-size: 1px"
                            type="info">取消
                    </el-button>
                    <el-button @click="handleAddcommentReplyList(index,commentList[index].id)"
                               style=";width: 80px;height: 35px;margin-bottom: 25px" type="success">回复
                    </el-button>
                </div>
                <div style=";width: 100%; ;border-bottom: 1px solid #9e9e9e;background-color:#fafafa;">
                    <div v-for="commentRely in commentList[index].commentReplyList"
                         style="border-bottom: 1px solid #9e9e9e;position: relative">
                        <img style=";margin-left: 18px;border-radius: 50%;width: 50px;height: 50px;margin-top: 20px"
                             :src="'http://localhost:9080/'+ commentRely.avatar"/>
                        <span style="top: 25px;left: 100px;position: absolute;">{{commentRely.nick}}
                        <el-button type="danger" icon="el-icon-delete" circle size="mini " v-if="commentRely.userId==userId"></el-button>
                        </span>
                        <span style="top: 25px;right: 50px;position: absolute;">{{commentRely.gmtCreate}}</span>
                        <p style="text-indent:2em;line-height: 50px;font-size: 15px;margin-left:25px">
                            {{commentRely.content}}</p>
                    </div>
                </div>
            </div>

        </div>
        <div style="background-color: #9e9e9e;">
            <div style="margin-top:50px;width: 700px;background-color: white">
                <div style="border: 1px solid #ccc;">
                    <Toolbar
                            style="border-bottom: 1px solid #ccc;"
                            :editor="editor"
                            :defaultConfig="toolbarConfig"
                            :mode="mode"
                    />
                    <Editor
                            style="height: 300px; overflow-y: hidden;"
                            v-model="html"
                            :defaultConfig="editorConfig"
                            :mode="mode"
                            @onCreated="onCreated"
                            @customPaste="customPaste"
                    />
                </div>
                <el-button style="margin-left: 315px;;text-align: center ;margin-top: 15px;margin-bottom: 15px"
                           type="success" @click="HandleAddComment()">提交
                </el-button>
            </div>
        </div>
    </div>

</template>

<script>
    import Vue from 'vue'
    import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

    export default Vue.extend({
        components: {Editor, Toolbar},
        data() {
            return {
                id:"",//帖子id
                userId:1,
                cid: "",
                displayShow2: -1,
                dialogVisible: false,
                editor: null,
                html: '',
                toolbarConfig: {},
                editorConfig: {placeholder: '请输入内容...'},
                mode: 'default', // or 'simple'
                tribune: {},
                commentCount: 0,//回复条数
                commentList: [
                    {
                        id: '',
                        nick: "",
                        avatar: "",
                        content: "",
                        gmtCreate: "",
                        commentReplyList: [//回复的列表
                            {
                                nick: "",
                                avatar: "",
                                content: "",
                                gmtCreate: ""
                            }
                        ]
                    }
                ],
                invitationId: {
                    id:"",
                    nick: "",
                    avatar: "",
                    gmtCreate: "",
                    content: "",
                    like:""
                },
                divlook: false,
                replyContent: ""

            }
        },
        methods: {
            handleDeleteCommentList(id){
                let url =  "http://localhost:9080/circlecomment/" + id +"/delete"
                this.axios.post(url).then((response) => {
                    console.log(response.data)
                    let responseBody = response.data
                    if (responseBody.state == 20000) {
                        this.$message({
                            message: '删除评论成功',
                            type: 'success'
                        });
                    } else {
                        this.$notify.error({
                            title: '提示',
                            message: responseBody.message,
                        });
                    }
                })
                this.loadCommentList(this.id)
                this.loadCommentList(this.id)
            },
            handleaddlike(){
                this.invitationId.like++;
                let url =  "http://localhost:9080/invitations/update"
                let Data = this.qs.stringify(this.invitationId)
                this.axios.post(url, Data).then((response) => {
                    console.log(response.data)
                    let responseBody = response.data
                    if (responseBody.state == 20000) {
                        this.$message({
                            message: '点赞成功',
                            type: 'success'
                        });
                    } else {
                        this.$notify.error({
                            title: '提示',
                            message: responseBody.message,
                        });
                    }
                })
            },
            handleAddcommentReplyList(index,id) {
                let a = {
                    userId: '1',
                    replyId: id,
                    content: this.replyContent
                }
                let url =  "http://localhost:9080/commentreply/insert"
                let Data = this.qs.stringify(a)
                this.axios.post(url, Data).then((response) => {
                    console.log(response.data)
                    let responseBody = response.data
                    if (responseBody.state == 20000) {
                        this.$message({
                            message: '评论成功',
                            type: 'success'
                        });
                        this.loadCommentReplyList(index,id)
                    } else {
                        this.$notify.error({
                            title: '提示',
                            message: responseBody.message,
                        });
                    }

                })
                this.replyContent=""
                this.displayShow2 = -1
                console.log(index)
                console.log(id)
                // this.loadCommentReplyList(id,this.commentList[id].id)
            },
            loadCommentList(id) {
                let url = "http://localhost:9080/circlecomment/" + id + "/select"
                console.log(url)
                this.axios.get(url).then((response) => {
                    let responseBody = response.data
                    this.commentList = responseBody.data;
                    console.log('圈子评论')
                    console.log(responseBody.data)
                    this.commentCount = responseBody.data.length
                    for (let i = 0; i < responseBody.data.length; i++) {
                        console.log(this.commentCount)
                        this.loadCommentReplyList(i, responseBody.data[i].id)
                    }
                })

            },
            loadCommentReplyList(i, id) {
                let url = "http://localhost:9080/commentreply/" + id + "/select"
                this.axios.get(url).then((response) => {
                    let responseBody = response.data
                    console.log('回复评论')
                    console.log(responseBody.data)
                    this.commentList[i].commentReplyList = responseBody.data;
                    this.commentCount +=  this.commentList[i].commentReplyList.length
                    console.log(this.commentList[i].commentReplyList)
                    console.log( this.commentCount)
                })

            },
            loadInvitationId(id) {
                let url = "http://localhost:9080/invitations/" + id + "/select"
                this.axios.get(url).then((response) => {
                    let responseBody = response.data
                    console.log(response.data)
                    this.invitationId = responseBody.data;
                    url = "http://localhost:9080/users/" + responseBody.data.userId + "/select"
                    this.axios.get(url).then((response) => {
                        let responseBody = response.data
                        console.log(response.data)
                        this.invitationId.url = 'http://localhost:9080/' + responseBody.data.avatar;
                        this.invitationId.nick = responseBody.data.nick;
                    })
                })
            },
            divlookf() {
                this.displayShow2 = -1
            },
            handledivlook(index) {
                this.displayShow2 = index
            },
            HandleAddComment() {
                console.log(this.html)
                let a = {
                    userId: '1',
                    content: this.html.replace(/<\/?.+?>/g, "").replace(/ /g, ""),
                    invitationId: this.id
                }
                if (a.content.trim()==""){
                    this.$notify.error({
                        title: '提示',
                        message: "输入内容不能为空"
                    })
                    return;
                }
                let url = "http://localhost:9080/circlecomment/insert"
                let Data = this.qs.stringify(a)
                this.axios.post(url, Data).then((response) => {
                    console.log(response.data)
                    let responseBody = response.data
                    if (responseBody.state == 20000) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    } else {
                        this.$notify.error({
                            title: '提示',
                            message: responseBody.message,

                        });
                    }
                    this.html = ""
                    this.loadCommentList(this.id)
                })

            },
            onCreated(editor) {
                this.editor = Object.seal(editor)
                console.log('onCreated', editor)
            },
            customPaste(editor, event, callback) {
                console.log('ClipboardEvent 粘贴事件对象', event)
                // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
                // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
                // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

                // 自定义插入内容
                editor.insertText('xxx')

                // 返回 false ，阻止默认粘贴行为
                event.preventDefault()
                callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）

                // 返回 true ，继续默认的粘贴行为
                // callback(true)
            },
        },
        created() {
        },
        mounted() {
            // 模拟 ajax 请求，异步渲染编辑器
            setTimeout(() => {
                this.html = '<p></p>'
            }, 1500)
            let id = this.$route.query.id
            this.id = id
            this.cid = this.$route.query.circleId
            console.log("圈子id为" + this.cid)
            console.log("id为" + id)
            this.loadInvitationId(id);
            this.loadCommentList(id)
            this.commentCount = this.commentList.length
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
        }
    })
</script>

<style scoped>
    .e {
        margin: auto;
        text-align: center;
        border-bottom: 1px solid #9e9e9e
    }

    .e > a {
        font-size: 15px;
        color: #9e9e9e;
    }

    .e > a :hover {
        color: red;
    }



    .left {
        position: relative;
        display: inline-block;
        padding: 30px;
    }

    div > span {
        position: absolute;
    }

    .s1 {
        top: 65px;
        left: 150px;
    }

    .s2 {
        top: 65px;
        right: 50px;
    }
</style>

